{% extends '@open/index.twig' %}

{% set title = Page.title %}
    
{% block js %}
    {{ parent() }}
    <script src="{{ asset("js/jquery.fancybox.pack.js") }}"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $.fn.filterData = function(key, value) {
                return this.filter(function() {
                    return $(this).data(key) == value;
                });
            };
            
            $('.category').click(function(){
                var key = $(this).data('key');
                if ($(this).is(':checked')) {
                    $('.product').filterData('key', key).addClass('filter');
                    $(".block").not('.filter').fadeOut();
                    $(".block.filter").fadeIn();
                } else if($('.category:checked').length > 0) {
                    $('.product').filterData('key', key).removeClass('filter');
                    $(".block").not('.filter').fadeOut();
                }
                
                if ($('.category:checked').length === 0) {
                    $(".block").removeClass('filter').not(':visible').fadeIn();
{#                    $(".block").not(':visible').removeClass('filter').fadeIn();#}
                }
            });
            
            $(".fancybox").fancybox({
                'openEffect': 'elastic',
                'closeEffect': 'elastic',
                helpers : {
                        title : {
                                type : 'inside'
                        }
                }
            });
        });
    </script>
{% endblock js %}

{% block css %}
    {{ parent() }}
    <link href="{{ asset("css/fancybox2/jquery.fancybox.css") }}" rel="stylesheet" type="text/css" media="screen" />
{% endblock css %}

{% block content %}
    <section class="wrapper c_block">
        <div class="shadow" style="margin-top: -23px;"></div>
        <article class="color col3-3">
            <header>
                <h2>{{ Page.title }}</h2>
            </header>
            
            {{ Page.content|raw }}
            
            {% if products|length %}
                <p class="cetegory_chek">
                    {% if categories|length %}
                        {% for Category in categories %}
                            <label><input type="checkbox" class="category" data-key="{{ Category.key }}" />{{ Category.name }}</label>
                        {% endfor %}
                    {% endif %}
                </p>
            {% else %}
                <br />
            {% endif %}
        </article>
        <div class="catalog">
            {% if products|length %}
                    {% for Product in products %}
                        <span class="product block {% if Product.inStock is empty %}notInStock{% endif %}" data-key="{{ Product.Category.key }}">
                            <label class="c_title">{{ Product.name }}</label>
                            {% set SOGI = getSOGI(Product) %}

                            {% if SOGI %}
                                <a href="{{ img(SOGI, {src: true, crop: true}) }}" title='{% if SOGI.title %}Заглавие: {{ SOGI.title|raw }}{% endif %}{%if SOGI.description%}<br />Описание: {{ SOGI.description|raw }}{% endif %}' class="fancybox">
                                    <img src="{{ img(Product, {src: true, width: 122, height: 122, crop: true}) }}">
                                </a>
                            {% endif %}
                            <label>{{ Product.description|raw }}</label>
                        </span>
                    {% endfor %}
                {% else %}
                    <b>{{ LRCSupport.label('message.noProducts') }}</b>
                    <br/>
                    <br/>
            {% endif %}
            <div class="clear"></div>
            <p class="a_center mb_10">
                За допълнителна  информация или възникал въпрос не се колебейте да попитате на телефон 0899293643.
            </p>
        </div>
        <div class="clear"></div>
        <div class="shadow" style="margin-bottom: -31px;"></div>
    </section>
{% endblock %}
